<template>
    <Codemirror
        v-model:value="props.code"
        :options="cmOptions"
        style="border: 1px solid #d1d5db;"
        ref="cmRef"
        height="calc(100% - 60px)"
        width="100%"
        @change="onChange"
        @input="onInput"
        @ready="onReady"
    ></Codemirror>
</template>
  <script lang="ts" setup>
import { ref, onMounted, onUnmounted } from 'vue'
import 'codemirror/mode/javascript/javascript.js'
import Codemirror from 'codemirror-editor-vue3'
import type { CmComponentRef } from 'codemirror-editor-vue3'
import type { Editor, EditorConfiguration } from 'codemirror'
import 'codemirror/addon/scroll/simplescrollbars.css'
import 'codemirror/addon/scroll/simplescrollbars'

const props = defineProps<{
  code: string
}>()

const code = ref(
  `const i = 0;
          for (; i < 9; i++) {
          console.log(i);
          // more statements
          }
      `
)
const cmRef = ref<CmComponentRef>()
const cmOptions: EditorConfiguration = {
  mode: 'text/javascript',
  scrollbarStyle: 'overlay'
}

const onChange = (val: string, cm: Editor) => {
  console.log(val)
  console.log(cm.getValue())
}

const onInput = (val: string) => {
  console.log(val)
}

const onReady = (cm: Editor) => {
  console.log(cm.focus())
}

onMounted(() => {
  //   setTimeout(() => {
  //     cmRef.value?.refresh()
  //   }, 1000)
  //   setTimeout(() => {
  //     cmRef.value?.resize(300, 200)
  //   }, 2000)
  //   setTimeout(() => {
  //     cmRef.value?.cminstance.isClean()
  //   }, 3000)
})

onUnmounted(() => {
  cmRef.value?.destroy()
})
</script>